<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日志列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<blockquote class="layui-elem-quote list_search">
    <div class="layui-inline">
        <input type="text" id="role" class="layui-input role"
               name="role" placeholder="请输入角色" value="">
    </div>
    <div class="layui-inline">
        <input type="text" id="operation" class="layui-input operation"
               name="operation" placeholder="请输入需要查询的操作" value="">
    </div>
    <div class="layui-inline">
        <input type="text" placeholder="开始时间：" class="layui-input" id="startTime" name="startTime">
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" placeholder="结束时间：" id="endTime" name="endTime">
    </div>
    <a class="layui-btn search_btn" lay-submit="" data-type="search" lay-filter="search">查询</a>
    <div class="layui-inline">
        （支持模糊查询）
    </div>
</blockquote>
<table id="logList" lay-filter="logList" class="layui-hidden"></table>
<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['jquery','layer','laypage','laytpl','table','laydate','form'],function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            laytpl = layui.laytpl,
            form = layui.form,
            table = layui.table,laydate = layui.laydate;
        table.render({
            elem:'#logList',
            url:'/log/list',
            title:'日志列表',
            cellMinWidth:80,
            page:true,
            limit:10,
            cols:[
                [
                    {type:'checkbox'},
                    {title:'ID',field:'id'},
                    {title:'操作账户',field:'account'},
                    {title:'用户角色',field:'role'},
                    {title:'用户操作',field:'operation'},
                    {title:'操作时间',field:'createTime'},
                    {title:'操作方法',field:'method'},
                    {title:'使用参数',field:'params'},
                    {title:'客户端',field:'ip'}
                ]
            ],parseData:function(result){
                return {
                    code:result.code==200?0:result.code,
                    msg:result.message,
                    count:result.data.total,
                    data:result.data.list
                }
            }
            ,initSort: {
                field: 'createTime' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
            ,type: 'date'//时间日期选择器
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,max:'new Date()'
            ,isInitValue: false
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime' //指定元素
            ,type: 'date'//时间日期选择器
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,max:'new Date()'
            ,isInitValue: false
        });
        //动态查询
        $(".search_btn").click(function () {
            table.reload('logList',{
                url:'/log/list',
                page:1,
                where:{
                    operate:$("#operation").val(),//操作
                    begin:$('#startTime').val(),
                    end:$('#endTime').val(),
                    role:$('#role').val()
                },
                parseData:function (result) {
                    return {
                        count:result.data.total,
                        msg:result.message,
                        data:result.data.list,
                        code:result.code==200?0:result.code
                    }
                }
            })

        });
    })

</script>

</body>
</html>